<template>
  <el-card>
    <div class="sendout">
      <h3 class="applyRecode">待发货订单</h3>
      <el-form  class="form" :model="form" ref="form" label-width="100px">
        <el-form-item class="dates" label="支付时间">
          <el-col :span="5">
            <el-form-item prop="stratTime" size="small">
              <el-date-picker v-model="form.stratTime" type="datetime" placeholder="选择开始日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">至</el-col>
          <el-col class="zuo" :span="5">
            <el-form-item prop="endTime" size="small">
              <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择结束日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item class="send" size="small" label="是否催发货：">
          <el-select class="publis" v-model="form.sendit" placeholder="请选择">
            <el-option v-for="(item, index) in items" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="sea" size="small" label="搜索：">
          <el-input placeholder="请输入订单编号/下单人手机号" v-model="form.search"></el-input>
        </el-form-item>
        <div class="btns"><el-button type="primary" @click="findInit" size="small">查询</el-button></div>
      </el-form>
      <div class="btns">
        <el-button type="primary" size="small">导出待发货清单</el-button>
        <el-button type="primary" size="small">导入发货清单</el-button>
      </div>
      <el-table class="tables" :data="tableData">
        <el-table-column prop="waybillNum" label="发货单ID" align="center"></el-table-column>
        <el-table-column prop="orderCode" label="订单ID" align="center"></el-table-column>
        <el-table-column prop="unfa" label="待发货" align="center"></el-table-column>
        <el-table-column prop="urgeNum" label="是否催发货" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.urgeNum == 1">是</span>
            <span v-else-if="scope.row.urgeNum == 0">否</span>
          </template>
        </el-table-column>
        <el-table-column prop="userPhone" label="下单人信息" align="center"></el-table-column>
        <el-table-column prop="payedAt" label="支付时间" align="center"></el-table-column>
        <el-table-column prop="buyerMsg" label="下单人留言" align="center"></el-table-column>
        <el-table-column prop="addressInfor" label="收货人信息" align="center"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="specUnit" label="SKU" align="center"></el-table-column>
        <el-table-column prop="goodsNum" label="数量" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="fasend(scope.row)" size="small">发货</el-button>
            <el-button type="text" @click="Unpacking(scope.row)" size="small">拆单发货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="确认发货" :visible.sync="send">
        <el-form :model="form1">
          <el-form-item label="是否有物流：" :label-width="formLabelWidth">
            <el-select v-model="form1.material" size="small" placeholder="请选择：">
              <el-option v-for="(wu, index) in wus" :key="index" :label="wu.label" :value="wu.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物流公司：" :label-width="formLabelWidth">
            <el-select v-model="form1.compony" size="small" placeholder="请选择：">
              <el-option v-for="(com, cindex) in coms" :key="cindex" :label="com.label" :value="com.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="sea" size="small" label="运单号：" :label-width="formLabelWidth">
            <el-input placeholder="请输入运单号" v-model="form1.orderNum"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="send = false">取 消</el-button>
          <el-button type="primary" @click="sure">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="拆开发货" :visible.sync="chai">
        <div class="san">
          <div class="wei">
            <p class="tit">未打包商品</p>
            <div class="list" v-for = "(item, index) in Unpacked" :key = "index" >
              <el-checkbox v-model="item.flag">{{item.packName}}</el-checkbox>
              <div>{{item.num}}件</div>
            </div>
          </div>
          <div class="buns">
            <div><el-button type="primary" size="mini" @click = "build">打包</el-button></div>
            <div><el-button type="primary" size="mini" @click = "unPacking">拆包</el-button></div>
          </div>
          <div class="already">
            <p class="tit">已打包商品</p>
            <div class="albao" v-for = "(item, index) in pack" :key = "index">
              <p><el-checkbox v-model="item.flag">包含：</el-checkbox></p>
              <div class="list">
                <div v-for = "(it, key) in item.arr" :key = "`${index}${key}`">{{ it.packName }}</div>
                <div>{{ item.arr.length }}件</div>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="chai = false">取 消</el-button>
          <el-button type="primary" @click="submitPack">提 交</el-button>
        </div>
      </el-dialog>
      <div class="page">
        <el-pagination background style="float:right;margin:0 0 30px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'sendout',
  data () {
    return {
      waybillId: '',
      gdnames: '美的小家电',
      jian: 1,
      licheck: false,
      baocheck1: false,
      baocheck2: false,
      baonames: '美的小家电',
      bajian: '2',
      baonames1: '美的小家电',
      bajian1: '1',
      currentPage: 1,
      pagesize: 10,
      total: 0,
      chai: false,
      send: false,
      formLabelWidth: '120px',
      form1: {
        material: '',
        compony: '',
        orderNum: ''
      },
      wus: [
        {
          label: '是',
          value: '1'
        },
        {
          label: '否',
          value: '0'
        }
      ],
      coms: [
        {
          label: '国安创客',
          value: '0'
        },
        {
          label: '中益善源',
          value: '1'
        }
      ],
      form: {
        stratTime: '',
        endTime: '',
        sendit: '',
        search: ''
      },
      tableData: [],
      items: [
        {
          label: '否',
          value: '0'
        },
        {
          label: '是',
          value: '1'
        }
      ],
      Unpacked: [],
      pack: []
    }
  },
  created () {
    this.init()
  },
  methods: {
    //点击发货
    fasend (row) {
      this.send = true
      this.waybillId = row.waybillId
    },
    init () {
      this.$tkAjax.post(`http://192.168.1.236:8769/order/getPageOrderByConditionForShop`, {
        storeId: '1fd0cc9274e845d7a3174d9dfbfac79a',
        queryType: 10,
        tradeMode: 0,
        // orderStatus: 20,
        maxPayedAt: this.form.stratTime,
        minPayedAt: this.form.endTime,
        isUrgeNum: this.form.sendit,
        orderCodeAndPhoneNum: this.form.search
      }, {
        params: {
          page: this.currentPage,
          pageSize: this.pagesize
        },
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.data.content.length > 0) {
          this.tableData = res.data.content
          this.total = res.data.content.length
        }
      }).catch(err => {
        this.$message.warning(err.data.message)
      })
    },
    //确认发货
    sure () {
      this.$tkAjax.post(`${this.$config.baseUrl}/order/waybill/ship`, {}, {
        params: {
          waybillId: this.waybillId,
          hasLogistics: this.form1.material,
          logisticsCompany: this.form1.compony,
          trackingNum: this.form1.orderNum
        }
      }).then(res => {
        this.$message.success(res.data.content)
        this.send = false
      }).catch(err => {
        this.$message.warning(err.data.message)
      })
    },
    submitPack () {
      let index = this.pack.findIndex(item => {
        return !item.flag
      })
      if (index !== -1) {
        this.$message.warning('有未选中的包')
        return false
      }
      this.chai = false
      this.$alert('订单拆分成功', '', {
        confirmButtonText: '确定',
        center: true
      })
    },
    Unpacking () {
      this.Unpacked = [{
        packName: '美的小家电',
        num: 1,
        flag: false
      }, {
        packName: '美的小家电',
        num: 1,
        flag: false
      }, {
        packName: '美的小家电',
        num: 1,
        flag: false
      }]
      this.pack = []
      this.chai = true
    },
    build () {
      let arr = this.Unpacked.filter(item => {
        return item.flag
      })
      this.Unpacked = this.Unpacked.filter(item => {
        return !item.flag
      })
      this.pack = this.pack.map(item => {
        item.flag = false
        return item
      })
      this.pack.push({
        flag: true,
        arr
      })
    },
    unPacking () {
      this.pack.forEach(item => {
        if (item.flag && item.arr.length > 1) {
          this.Unpacked = this.Unpacked.concat(item.arr)
        } else {
          this.$message.warning('单独商品不能拆包')
          item.flag = false
        }
      })
      this.pack = this.pack.filter(item => {
        return !item.flag
      })
    },
    findInit () {
      this.currentPage = 1
      this.init()
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.init()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.init()
    }
  }
}
</script>
<style lang="scss" scope>
.sendout {
  .form {
    display: flex;
    .dates {
      .el-form-item {
        .el-form-item__content {
          .el-date-editor.el-input {
            width: 188px;
          }
        }
      }
      .line {
        padding-left: 90px;
      }
      .zuo {
        margin-left: 21px;
      }
    }
    .send {
      margin-left: -74px;
      .el-form-item__content {
        .el-select {
          width: 150px;
        }
      }
    }
    .sea {
      .el-form-item__content {
        .el-input {
          width: 215px;
        }
      }
    }
  }
  .tables {
    margin: 15px 0 30px;
  }
  .el-dialog {
    width: 40%;
    .sea {
      .el-input {
        width: 350px;
      }
    }
    .san {
      display: flex;
      .wei {
        width: 40%;
        padding: 5px 10px;
        border: 1px solid #ccc;
        margin-right: 30px;
        .tit {
          text-align: center;
        }
        .list {
          display: flex;
          justify-content: space-between;
        }
      }
      .buns {
        padding-right: 30px;
        .el-button:last-child {
          margin-top: 20px
        }
      }
      .already {
        width: 40%;
        padding: 5px 10px;
        border: 1px solid #ccc;
        .tit {
          text-align: center;
        }
        .albao {
          padding-bottom: 15px;
          .list {
            display: flex;
            justify-content: space-between;
          }
        }
        .baotwo {
          border-top: 1px solid #f5f5f5;
        }
      }
    }
  }
  .btns {
    .el-button {
      border-radius: 4px;
      margin-left: 20px;
    }
  }
}
</style>
